<template>
  <section class="sidebar">
    <el-menu class="sidebar-el-menu" @select="handleMenuSelect" :default-active="onRoutes" :collapse="collapse" background-color="#f6f6f6"
            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
      <template v-for="item in list">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
              <template slot="title">
                  <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                  <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                      <template slot="title">{{ subItem.title }}</template>
                      <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
                          {{ threeItem.title }}
                      </el-menu-item>
                  </el-submenu>
                  <el-menu-item v-else :index="subItem.index" :key="subItem.index">
                      {{ subItem.title }}
                  </el-menu-item>
              </template>
          </el-submenu>
      </template>
      <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
          </el-menu-item>
      </template>
      </template>
    </el-menu>
  </section>
</template>
<script>
import bus from "./bus";
import Client from '../../assets/js/common.js';
export default {
  data() {
    return {
      collapse: false,
      arr: [],
      list: [
        {
          icon: 'el-icon-lx-home',
          index: 'dashboard',
          title: '系统首页'
        },
        {
                icon: 'el-icon-lx-home',
                index: 'fruit',
                title: '菜单一',
                subs: [
                    {
                      index: 'fruitList',
                      title: '菜单1-1'
                    },
                    {
                      index: 'greensList',
                      title: '菜单1-2'
                    },
                    {
                      index: 'meun5',
                      title: '菜单1-3'
                    },
                    {
                      index: 'meun6',
                      title: '菜单1-4'
                    },
                    {
                      index: 'meun7',
                      title: '菜单1-5'
                    },
                    {
                      index: 'meun8',
                      title: '菜单1-6'
                    },
                    {
                      index: 'meun9',
                      title: '菜单1-7'
                    },
                    {
                      index: 'meun10',
                      title: '菜单1-8'
                    },
                    {
                      index: 'meun11',
                      title: '菜单1-9'
                    },
                    {
                      index: 'meun12',
                      title: '菜单1-10'
                    },
                    {
                      index: 'meun13',
                      title: '菜单1-11'
                    },
                    {
                      index: 'meun14',
                      title: '菜单1-12'
                    },
                    {
                      index: 'meun15',
                      title: '菜单1-13'
                    },
                    {
                      index: 'meun16',
                      title: '菜单1-14'
                    },
                    {
                      index: 'meun17',
                      title: '菜单1-15'
                    },
                    {
                      index: 'meun18',
                      title: '菜单1-16'
                    },
                    {
                      index: 'meun19',
                      title: '菜单1-17'
                    },
                    {
                      index: 'meun20',
                      title: '菜单1-18'
                    }
                ]
              },
              {
                icon: 'el-icon-lx-cascades',
                index: 'fish',
                title: '菜单二',
                subs: [
                    {
                      index: 'fishList',
                      title: '菜单2-1'
                    },
                    {
                      index: 'meun1',
                      title: '菜单2-2'
                    },
                    {
                      index: 'meun2',
                      title: '菜单2-3'
                    },
                    {
                      index: 'meun3',
                      title: '菜单2-4'
                    },
                    {
                      index: 'meun4',
                      title: '菜单2-5'
                    }
                ]
              }, 
              {
                icon: 'el-icon-lx-cascades',
                index: 'shop',
                title: '菜单三',
                subs: [
                    {
                      index: 'lifeList',
                      title: '菜单3-1'
                    }
                ]
              },
              
            ]
    }
  },
  computed:{
    onRoutes(){
      return this.$route.path.replace('/','');
    }
  },
  created() {
    bus.$on('collapse', msg => {
      this.collapse = msg;
    })
  },
  methods: {
    handleMenuSelect(index,indexPath) {
      this.arr = [];
      for(let i=0; i<indexPath.length; i++) {
        this.deepFor(this.list, indexPath[i])
      }
      this.addStore(this.arr);
      this.$emit('myClick', this.arr)
    },
    addStore(arr) {
      let store = Client.getSession("path");
      let obj = {
        str: arr[arr.length-1].path,
        list: arr
      }
      if(store && store.length>0) {
        let bool = false;
        for(let i=0; i<store.length; i++) {
          if(store[i].str == obj.str) {
            bool = true;
          }
        }
        if(!bool) {
          store.push(obj);
        }
      }else {
        store = [];
        store.push(obj)
        
      }
      Client.setSession("path", store);
    },
    deepFor(source, str){
      const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
      for(let keys in source){ // 遍历目标
        if(source.hasOwnProperty(keys)){
          if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象，就递归一下
            targetObj[keys] = source[keys].constructor === Array ? [] : {};
            targetObj[keys] = this.deepFor(source[keys], str);
          }else{ // 如果不是，就直接赋值
            // console.log(str, source[keys])
            if(str == source[keys]) {
              
              let obj = {
                path: str,
                title: source['title']
              }
              this.arr.push(obj);
            }
            targetObj[keys] = source[keys];
          }
        }
      }
      
    }
  }
}
</script>
<style lang="less" scoped>
.sidebar{
  display: block;
  // position: absolute;
  // left: 0;
  // top: 70px;
  // bottom:0;
  height: 100%;
  overflow-y: scroll;
  &::-webkit-scrollbar{
    width: 0;
  }
  .sidebar-el-menu:not(.el-menu--collapse){
    width: 200px;
  }
   &>ul {
    height:100%;
  }
}
</style>

